body {
  margin: 0;
  padding: 0;
  background: #333;
}

.member-title {
  font-size: 1.5em;
  color: white;
  margin: 20px auto;
}

.member-content {
  width: 80%;
  margin-left: 10%;
}

.member {
  width: 20%;
  margin: 16px auto;
  float: left;
  text-align: center;
  padding: 0;
}

.member-avatar {
  width: 50%;
  padding: 16px 0;
  border-radius: 50%;
}

.member-id {
  text-align: center;
  font-size: 0.86em;
  font-weight: bold;
}

.member a {
  color: #1685dc;
  text-decoration: none;
}

.member a:hover {
  color: #16a6ff;
}

@media screen and (max-width: 1000px) {
  .member-content {
    width: 90%;
    margin-left: 5%;
  }

  .member {
    width: 20%;
    margin: 8px auto;
  }
  .member-avatar {
    width: 60%;
    padding: 16px 0;
    border-radius: 50%;
  }
}

@media screen and (max-width: 768px) {
  .member-content {
    width: 90%;
    margin-left: 5%;
  }

  .member {
    width: 33.3%;
    margin: 8px auto;
  }
  .member-avatar {
    width: 60%;
    padding: 16px 0;
    border-radius: 50%;
  }
}
